<template>
	<view>
		<view class="header">
			<view class="layout">
				<view class="store-box">
					<view class="store-box-basic">{{storeData.storeName}}</view>
					<view class="store-box-text">距您{{storeData.distance}}</view>
				</view>
				<view class="delivery-box">
					<view class="layout">
						<view class="delivery-box-pickup" @click="deliveryType=1" :class="deliveryType == 1 ?'delivery-box-pickup-actived':''">自提</view>
						<view class="delivery-box-outward" @click="deliveryType=2;onChooseAddressButton()" :class="deliveryType == 2 ?'delivery-box-outward-actived':''">外送</view>
					</view>
				</view>
				
			</view>
			<view class="">
				<view class="layout">
					<view></view>
					<view>
						<image src="../../../static/logo.png"></image>
					</view>
				</view>
			</view>
			<view class="header-menu">
				<view class="layout">
					<view class="header-menu-item">经典菜单</view>
					<view class="header-menu-item">会员卡</view>
					<view class="header-menu-item">热销推荐榜</view>
					<view class="header-menu-item">我的常点</view>
				</view>
			</view>
		</view>
		<view class="product">
			<view class="layout">
				<view class="product-menu">
					<view class="product-menu-item" :class="filterForm.catalogID == catalog.ID?'product-menu-item-actived':''" v-for="(catalog,index) in catalogeList" :key="index">
						{{catalog.title}}
					</view>
				</view>
				<view class="product-box">
					<scroll-view class="product-box-body" scroll-y="true" @scroll="onScrollListen">
						<view class="product-box-item" v-for="(product,index) in productList" :key="index" @click="onProductDetail(product)">
							<view class="layout">
								<view class="product-box-icon">
									<image :src="product.prodLogo"></image>
								</view>
								<view class="product-box-text">
									<view class="product-box-text-subject">{{product.prodName}}</view>
									<view class="product-box-text-note">{{product.description}}</view>
									<view class="product-box-text-price">
										￥{{product.price}}<text>(面价￥{{product.originalPrice}})</text></view>
								</view>
								<view class="product-box-shopping">
									<image src="/static/icon-add.png"></image>
								</view>
							</view>
							
						</view>						
					</scroll-view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deliveryType:1,
				storeData:{
					storeName:"城南广场店",
					distance:"2.4km"
				},
				filterForm:{
					catalogID:12
				},
				catalogeList:[
					{
						ID:12,
						title:"人气TOP"
					},
					{
						ID:110,
						title:"小黑背"
					},
					{
						ID:210,
						title:"秋冬暖加"
					},
					{
						ID:110,
						title:"小黑背"
					},
					{
						ID:210,
						title:"秋冬暖加"
					},
					{
						ID:110,
						title:"小黑背"
					},
					{
						ID:210,
						title:"秋冬暖加"
					},
					{
						ID:110,
						title:"小黑背"
					},
					{
						ID:210,
						title:"秋冬暖加"
					}
				],
				productList:[
					{
						prodLogo:"/static/food-002.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food-003.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food-002.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food-003.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food-002.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food-002.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					},
					{
						prodLogo:"/static/food.jpg",
						prodName:"酱香拿铁",
						description:"瑞兴咖啡x贵州茅台联名款",
						price:"19",
						originalPrice:"30",
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			onScrollListen:function(e){
				console.log(e)
				let windowData = e.detail
				let scrollData = e.currentTarget
				console.log(windowData,scrollData)
			},
			onChooseAddressButton:function(){
				uni.navigateTo({
					url:"/pages/home/address/address"
				})
			},
			onProductDetail:function(product){
				uni.navigateTo({
					url:"/pages/product/detail/detail?productID="+product.ID
				})
			}
		}
	}
</script>

<style>
.header { margin-bottom: 30rpx; background: #fff; }
.header-menu-item { padding: 15rpx; font-size: 14px; }
.store-box { padding: 25rpx 0; padding-left: 20rpx;}
.store-box-text { padding-top: 20rpx; }
.store-box-basic { font-size: 14px; }

.delivery-box { margin: 30rpx 0; margin-right: 20rpx; background: #ededed; }
.delivery-box { border-radius: 30rpx; height: 50rpx; }
.delivery-box-outward,
.delivery-box-pickup { width: 50rpx; height: 50rpx; line-height: 50rpx; background: #ededed; }

.delivery-box-outward { border-top-right-radius: 30rpx; border-bottom-right-radius: 30rpx;}
.delivery-box-outward { padding-left: 20rpx; padding-right: 20rpx; text-align: center;}
.delivery-box-pickup { border-top-left-radius: 30rpx; border-bottom-left-radius: 30rpx; }
.delivery-box-pickup { padding-left: 20rpx; padding-right: 20rpx; text-align: center;}

.delivery-box-pickup-actived { background: #c60; color: #fff; border-top-right-radius: 30rpx; border-bottom-right-radius: 30rpx;}

.delivery-box-outward-actived { background: #c60; color: #fff; border-top-left-radius: 30rpx; border-bottom-left-radius: 30rpx;}

.product { background: #ededed; }
.product-menu { width: 190rpx; }
.product-menu-item { padding: 30rpx 10rpx; font-size: 14px; }
.product-menu-item-actived { background: #f8f8f8; border-top-right-radius: 30rpx; border-bottom-right-radius: 30rpx; }
.product-box { width: 520rpx; min-height: 200rpx;  }
.product-box-body { position: fixed; bottom: 0; right: 0; top: 250rpx; left: 210rpx; }
.product-box-body { background: #fff;padding: 20rpx; border-radius: 20rpx;  }
.product-box-item { margin-bottom: 30rpx;  width: 500rpx; height: 200rpx;  }
.product-box-icon { width: 150rpx; height: 200rpx;}
.product-box-text { width: 290rpx; padding-left: 10rpx; text-align: left;}
.product-box-text-subject { font-size: 16px; font-weight: 500; padding-top: 30rpx; }
.product-box-text-note { padding: 20rpx 0; font-size: 12px; color: #666;}
.product-box-text-price { color: red; font-size: 16px;}
.product-box-text-price text { padding-left: 10rpx; font-size: 12px!important; color: #999!important;}
.product-box-shopping { width: 50rpx; height: 50rpx; padding-top: 150rpx;}
</style>
